<template>
    <div class="challenge-detail-page">
        <van-nav-bar title="Daily Challenge" left-text="Back" left-arrow @click-left="$router.back()" />

        <div v-if="challenge" class="challenge-content">
            <!-- Challenge Header -->
            <div class="challenge-header">
                <div class="challenge-icon">
                    <van-icon :name="challenge.icon" :color="challenge.color" size="48" />
                </div>
                <h1 class="challenge-title">{{ challenge.title }}</h1>
                <p class="challenge-description">{{ challenge.description }}</p>
                <div class="challenge-meta">
                    <van-tag type="primary">{{ challenge.points }} Points</van-tag>
                    <van-tag :type="challenge.completed ? 'success' : 'warning'">
                        {{ challenge.completed ? 'Completed' : 'In Progress' }}
                    </van-tag>
                </div>
            </div>

            <!-- Progress Section -->
            <div class="progress-section">
                <h3>Progress</h3>
                <div class="progress-info">
                    <div class="progress-text">
                        {{ challenge.progress.current }} / {{ challenge.progress.target }} {{ challenge.progress.unit }}
                    </div>
                    <van-progress :percentage="(challenge.progress.current / challenge.progress.target) * 100"
                        stroke-width="8" color="#07c160" />
                </div>
            </div>

            <!-- Instructions -->
            <div class="instructions-section">
                <h3>How to Complete</h3>
                <ul class="instructions-list">
                    <li v-for="instruction in challenge.instructions" :key="instruction">
                        {{ instruction }}
                    </li>
                </ul>
            </div>

            <!-- Tips -->
            <div class="tips-section">
                <h3>Tips for Success</h3>
                <div class="tips-list">
                    <div v-for="tip in challenge.tips" :key="tip" class="tip-item">
                        <van-icon name="bulb-o" color="#f39c12" />
                        <span>{{ tip }}</span>
                    </div>
                </div>
            </div>

            <!-- Action Button -->
            <div class="action-section">
                <van-button v-if="!challenge.completed" type="primary" size="large" block @click="startChallenge">
                    Start Challenge
                </van-button>
                <van-button v-else type="success" size="large" block disabled>
                    <van-icon name="success" />
                    Challenge Completed!
                </van-button>
            </div>
        </div>

        <div v-else class="loading-state">
            <van-loading size="24px" vertical>Loading challenge...</van-loading>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()

interface Challenge {
    id: string
    title: string
    description: string
    icon: string
    color: string
    points: number
    completed: boolean
    progress: {
        current: number
        target: number
        unit: string
    }
    instructions: string[]
    tips: string[]
}

const challenge = ref<Challenge | null>(null)

// Mock challenge data
const mockChallenges: Record<string, Challenge> = {
    '1': {
        id: '1',
        title: 'Practice Active Listening',
        description: 'Engage in meaningful conversations by practicing active listening techniques.',
        icon: 'volume-o',
        color: '#1989fa',
        points: 50,
        completed: false,
        progress: {
            current: 2,
            target: 5,
            unit: 'conversations'
        },
        instructions: [
            'Start a conversation with someone new',
            'Focus on really listening to what they say',
            'Ask follow-up questions based on their responses',
            'Avoid interrupting or thinking about your next response',
            'Summarize what you heard to confirm understanding'
        ],
        tips: [
            'Make eye contact to show you\'re engaged',
            'Use body language like nodding to encourage them',
            'Ask open-ended questions to keep the conversation flowing',
            'Put away distractions like your phone'
        ]
    },
    '2': {
        id: '2',
        title: 'Compliment Challenge',
        description: 'Give genuine compliments to brighten someone\'s day and practice positive communication.',
        icon: 'smile-o',
        color: '#07c160',
        points: 30,
        completed: true,
        progress: {
            current: 3,
            target: 3,
            unit: 'compliments'
        },
        instructions: [
            'Give at least 3 genuine compliments today',
            'Make sure they are specific and sincere',
            'Notice people\'s efforts, not just appearance',
            'Observe their reaction and respond appropriately'
        ],
        tips: [
            'Be specific - "I love how creative your presentation was"',
            'Focus on actions and choices people make',
            'Timing matters - give compliments when appropriate',
            'Be genuine - people can tell when you\'re not sincere'
        ]
    }
}

const startChallenge = () => {
    if (challenge.value) {
        showToast('Challenge started! Good luck!')
        // In a real app, this would track the challenge progress
    }
}

onMounted(() => {
    const challengeId = route.params.challengeId as string
    challenge.value = mockChallenges[challengeId] || null

    if (!challenge.value) {
        showToast('Challenge not found')
        router.back()
    }
})
</script>

<style lang="scss" scoped>
.challenge-detail-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.challenge-content {
    padding: 16px;
}

.challenge-header {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    text-align: center;

    .challenge-icon {
        margin-bottom: 16px;
    }

    .challenge-title {
        font-size: 24px;
        font-weight: 600;
        color: #323233;
        margin: 0 0 12px 0;
    }

    .challenge-description {
        font-size: 16px;
        color: #646566;
        line-height: 1.5;
        margin: 0 0 16px 0;
    }

    .challenge-meta {
        display: flex;
        justify-content: center;
        gap: 12px;
    }
}

.progress-section,
.instructions-section,
.tips-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;

    h3 {
        font-size: 18px;
        font-weight: 600;
        color: #323233;
        margin: 0 0 16px 0;
    }
}

.progress-info {
    .progress-text {
        font-size: 16px;
        color: #323233;
        margin-bottom: 12px;
        text-align: center;
    }
}

.instructions-list {
    margin: 0;
    padding-left: 20px;

    li {
        font-size: 16px;
        color: #646566;
        line-height: 1.5;
        margin-bottom: 8px;
    }
}

.tips-list {
    .tip-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;

        &:last-child {
            margin-bottom: 0;
        }

        .van-icon {
            margin-top: 2px;
            flex-shrink: 0;
        }

        span {
            font-size: 16px;
            color: #646566;
            line-height: 1.5;
        }
    }
}

.action-section {
    margin-top: 24px;
}

.loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
</style>